<html class="no-js fixed-layout">

<!--通用head-->
{include file="Public:head"}

<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<!--管理端头部-->
{include file="Public:header"}

<div class="am-cf admin-main">

    <!--管理端左菜单栏-->
    {include file="Public:menu"}
    <div class="admin-content">
        <div class="am-cf am-padding">
            <div class=" am-cf"><span class="am-text-lg">售电趋势&nbsp;</span><i class="am-icon-question-circle" style="color: darkgray;"></i></div>
            <div class="am-fl">
                <small class="am-sans-serif">时间：
                    <a href="" >今天</a>
                    <a href="" class="am-link-muted">7天</a>
                    <a href="" class="am-link-muted">14天</a>
                    <a href="" class="am-link-muted">30天</a>
                </small>
                <select name="date">
                    <option value="1">2017年7月17日至2017年7月17日</option>
                </select>
            </div>

        </div>
        <div class="admin-content-body">

            <div class="am-padding">
                <div data-am-widget="tabs" class="am-tabs am-tabs-default ">
                    <ul class="am-tabs-nav">
                        <li class="am-active">
                            <a href="#">关键指标</a>
                        </li>
                        <li class="">
                            <a href="#">售电比</a>
                        </li>

                    </ul>
                    <div class="am-tabs-bd">
                        <div data-tab-panel-0 class="am-tab-panel am-active">
                            <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
                                <span class="am-titlebar-title">趋势图</span>
                            </div>
                            <div id="container"></div>
                        </div>
                        <div data-tab-panel-0 class="am-tab-panel am-active">
                            <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
                                <span class="am-titlebar-title">趋势图</span>
                            </div>
                            <div id="container2"></div>
                        </div>
                        <div data-tab-panel-1 class="am-tab-panel">

                        </div>
                        <div data-tab-panel-2 class="am-tab-panel ">

                        </div>
                    </div>
                </div>

            </div>

        </div>
        <footer class="admin-content-footer">
            <hr>
            <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
        </footer>
    </div>
    <!-- content end -->

</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="__PUBLIC__static/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__static/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="__PUBLIC__static/js/amazeui.min.js"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__static/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__static/js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var chart = Highcharts.chart('container', {
        title: {
            text: null
        },
        yAxis: {
            title: {
                text: null
            },
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['{$times[0]}', '{$times[1]}', '{$times[2]}', '{$times[3]}', '{$times[4]}', '{$times[5]}', '{$times[6]}', '{$times[7]}', '{$times[8]}', '{$times[9]}', '{$times[10]}' ]
        },
        series: [{
            name: '',
            data: [{$datas[0]},{$datas[1]},{$datas[2]},{$datas[3]},{$datas[4]},{$datas[5]},{$datas[6]},{$datas[7]},{$datas[8]},{$datas[9]},{$datas[10]}],

        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    var chart = Highcharts.chart('container2', {
        title: {
            text: null
        },
        yAxis: {
            title: {
                text: null
            },
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['{$times2[0]}', '{$times2[1]}', '{$times2[2]}', '{$times2[3]}', '{$times2[4]}', '{$times2[5]}', '{$times2[6]}', '{$times2[7]}', '{$times2[8]}', '{$times2[9]}', '{$times2[10]}' ]
        },
        series: [{
            name: '',
            data: [{$datas2[0]},{$datas2[1]},{$datas2[2]},{$datas2[3]},{$datas2[4]},{$datas2[5]},{$datas2[6]},{$datas2[7]},{$datas2[8]},{$datas2[9]},{$datas2[10]}],

        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>

</html>